<template>
  <transition name="el-fade-in">
    <el-dialog v-if="isShow" class="confirm-dialog" width="500px" :close-on-press-escape="false" :title="options.title" center :close-on-click-modal="false" :visible.sync="options.show" @close="close">
      <p>{{ options.message }}</p>
      <template slot="footer">
        <el-button :class="[{ 'colorBtn': !options.showCancelButton }]" :loading="confirmButtonLoading" @click="confirm">{{ options.confirmButtonText || '确 定' }}</el-button>
        <el-button v-if="options.showCancelButton" class="colorBtn" @click="cancel">{{ options.canlcelButtonText || '取 消' }}</el-button>
      </template>
    </el-dialog>
  </transition>

</template>

<script>
import './style.scss';
export default {
  name: 'Confirm',
  data() {
    return {
      confirmButtonLoading: false,
      isShow: true,
      options: {
        title: "",
        message: "",
        show: false,
        beforeClose: null,
        showCancelButton: false,
        confirmButtonText: '',
        canlcelButtonText: '',
      },
    };
  },
  methods: {
    cancel() {},
    confirm() {},
    close() {},
    handleAction() {
      if (typeof this.options.beforeClose === 'function') {
        this.options.beforeClose('confirm', this, this.doClose);
      } else if (!this.options.beforeClose) {
        this.doClose();
      }
    },
    doClose() {
      this.options.show = false;
    },
  },
};
</script>
